<template>
  <div id="page-login" :style="{ 'background-image': background }" v-if="loginStatus<0">
    <div class="container-box" :style="{'opacity':0.96}">
      <div class="login-tips" v-if="loginTips">{{ loginTips }}</div>
      <h1 class="tc">俱乐部/赛事方登录</h1>

      <Form ref="form" :model="form" :rules="rules">
        <FormItem prop="account">
          <Input type="text" v-model="form.account" placeholder="请输入用户名" />
        </FormItem>
        <FormItem prop="password">
          <Input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            @keydown.enter.native="onLogin('form')" />
        </FormItem>
        <FormItem class="mb10">
          <Button
            type="primary"
            size="large"
            long
            :loading="isSubmiting"
            @click="onLogin('form')">
            登录
          </Button>
        </FormItem>
        <FormItem>
          <Row>
            <Col span="12" class="tl">
              <a href="#/register">没有账户？注册！</a>
            </Col>
            <Col span="12" class="tr">
              <a href="#/forget-password">忘记密码</a>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
  import _ from 'underscore'
  import { mapGetters } from 'vuex'
  import { LOGIN_STATUS } from '@/store/constant'

  export default {
    name: 'page-login',
    data () {
      return {
        isSubmiting: false,
        loginTips: null,
        form: {
          account: '',
          password: ''
        },
        rules: {
          account: [
            { required: true, message: '请输入用户名', trigger: 'change' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'change' }
          ]
        }
      }
    },
    watch: {
      'loginStatus': 'onLoginStatusChange'
    },
    computed: {
      ...mapGetters({
        loginStatus: 'loginStatus'
      }),
      background: () => {
        let path = `http://image.1m5bike.com/image/jpg/public/bj${_.random(1, 6)}.jpg`
        return `url(${path})`
      }
    },
    methods: {
      onLogin (formName) {
        this.loginTips = ''
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.isSubmiting = true
            this.$store.dispatch('login', this.form)
          } else {
            return false
          }

          // 3秒后可以重试
          setTimeout(() => {
            if (this.isSubmiting === true) {
              this.loginTips = '登录超时，网络超时 或 服务器正在维护中'
              this.isSubmiting = false
            }
          }, 2000)
        })
      },
      async onLoginStatusChange () {
        switch (this.loginStatus) {
          case LOGIN_STATUS.SUCCESS:
            this.$router.push({ path: '/' })
            break
          case LOGIN_STATUS.FAILED:
            this.isSubmiting = false
            this.loginTips = '用户名或登录密码错误'
            this.$store.commit('ACCOUNT_NOLOGIN')
            break
          case LOGIN_STATUS.ERROR:
            this.isSubmiting = false
            this.loginTips = '服务器错误或正在维护中'
            this.$store.commit('ACCOUNT_NOLOGIN')
            break
        }
      }
    }
  }
</script>

<style lang="less">
  #page-login {
    background: no-repeat center center;
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    background-image: url(../../assets/images/pages/login/bg.jpg);

    .container-box {
      width: 380px;
      height: 329px;
      padding: 40px 30px;
      position: absolute;
      right: 10%;
      top: 50%;
      margin-top: -175px;
      margin-left: -210px;
      z-index: 99;
      background-color: #fff;
      border-radius: 2px;
      box-sizing: border-box;

      .login-tips {
        height: 30px;
        line-height: 30px;
        background: #FEEDEF;
        color: #F72239;
        font-size: 12px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
      }

      h1 {
        font-size: 20px;
        font-weight: normal;
        margin-top: 0px;
        margin-bottom: 40px;
        color:#333C48;
        font-weight: bold;
        line-height: 20px;
      }

      input {
        height: 40px;
        width: 320px;
        font-size: 14px;
        border-radius: 2px;
      }
    }
  }
</style>
